<template>
  <div id="editorChange">
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="内容" name="1">
        <div id="wangeditor">
          <div ref="editorElem"></div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="内容样式" name="2">
        <ul class="content-list">
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="0"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="0"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="0"></edgeSetting>
            </div>
          </li>
          <li>
            <span>圆角：</span>
            <div>
              <edgeSetting v-model="styles.circle" unit="px" :max="15" :init="10"></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import E from "wangeditor";
import edgeSetting from "../../comm/edgeSetting";
export default {
  name: "editorChange",
  data() {
    return {
      editor: null,
      editorContent: "",
      activeNames1: "1",
      activeNames2: "2",
    };
  },

  mounted() {
    this.editor = new E(this.$refs.editorElem);
    this.editor.customConfig.onchange = (html) => {
      console.log(html);
      this.editorContent = html;
    };
    this.editor.customConfig.menus = [
      // 菜单配置
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入图片
      // "table", // 表格
      // "code", // 插入代码
      "undo", // 撤销
      "redo", // 重复
    ];
    this.editor.customConfig.uploadImgMaxLength = 5; /* 限制一次最多上传 5 张图片 */
    this.editor.customConfig.uploadImgMaxSize =
      3 *
      1024 *
      1024; /* 将图片大小限制为 3M 默认为5M / 
        /* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/
    this.editor.customConfig.customUploadImg = async (files, insert) => {
      /* files 是 input 中选中的文件列表 */

      let formData = new FormData();
      formData.append("file", files[0]);
      let data = await this.upload(formData);
      /* upload方法是后台提供的上传图片的接口 */
      /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/

      insert(data.imgUrl);
    };
    this.editor.customConfig.onchange = (html) => {
      /* html 即变化之后的内容 */
      this.styles.html = html;
    };
    this.editor.create(); /* 创建编辑器 */
  },
  components: {
    edgeSetting,
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
    styles() {
      return this.list[this.currentId].styles;
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/css/base.less");
/deep/.w-e-toolbar {
  flex-wrap: wrap !important;
}
</style>